<template>
  <div id="office">
    <div id="chart"
         :style="{height:height,width:width}" />
    <img id="img"
         src="~@/assets/office/office2.jpg"
         alt=""
         style="display:none"
         :style="{height:height,width:width}">
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { debounce } from '@/utils'
// import { Queue } from '@/utils'
import mapData from '@/constants/Map.constants'

import { parseTime } from '@/utils'
// import { fetchList } from '@/api/data'

export default {
  mixins: [resize],
  // props:['id','show2D','tagId','width','height'],
  props: {
    // className: {
    //   type: String,
    //   default: 'chart'
    // },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '600px'
    },
    tagId: {
      type: String
    },
    show2D: {
      type: Boolean
    },
    tagInfo: {
      type: Array
    },
    tabsInfo: {
      type: Object
    },
    warningInfo: {
      type: Object
    },
    tagPosition: {
      type: Array
    }
  },
  data() {
    return {
      chart: null,
      img: new Image(), // 背景图片缓存
      img2: null, // 背景图片缓存
      img3: new Image(),
      canvas: null,
      ratio: null,
      handCart: null,
      data: {
        timeline: [
          1589775158000,
          1589775159000,
          1589775160000,
          1589775161000,
          1589775162000,
          1589775163000,
          1589775164000,
          1589775165000,
          1589775166000,
          1589775167000,
          1589775168000,
          1589775169000,
          1589775170000,
          1589775171000,
          1589775172000,
          1589775173000,
          1589775174000,
          1589775175000,
          1589775176000,
          1589775177000,
          1589775178000,
          1589775179000,
          1589775180000,
          1589775181000
        ],
        series: [
          [
            [4, 16, 351014, 'Australia', 1800],
            [2, 12, 645526, 'Canada', 1800],
            [11.5, 12, 321675013, 'China', 1800]
          ],
          [
            [4, 15.5, 342440, 'Australia', 1810],
            [2.5, 12, 727603, 'Canada', 1810],
            [11, 12, 350542958, 'China', 1810]
          ],
          [
            [4, 15, 334002, 'Australia', 1820],
            [3, 12, 879432, 'Canada', 1820],
            [10.5, 12, 380055273, 'China', 1820]
          ],
          [
            [4, 14.5, 348143, 'Australia', 1830],
            [3.5, 12, 1202146, 'Canada', 1830],
            [10, 12, 402373519, 'China', 1830]
          ],
          [
            [4, 14, 434095, 'Australia', 1840],
            [4, 12, 1745604, 'Canada', 1840],
            [9.5, 12, 411213424, 'China', 1840]
          ],
          [
            [4, 13.5, 742619, 'Australia', 1850],
            [4.5, 12, 2487811, 'Canada', 1850],
            [9, 12, 402711280, 'China', 1850]
          ],
          [
            [4, 13, 1256048, 'Australia', 1860],
            [5, 12, 3231465, 'Canada', 1860],
            [8.5, 12, 380047548, 'China', 1860]
          ],
          [
            [4, 12.5, 1724213, 'Australia', 1870],
            [5.5, 12, 3817167, 'Canada', 1870],
            [8, 12, 363661158, 'China', 1870]
          ],
          [
            [4, 12, 2253007, 'Australia', 1880],
            [6, 12, 4360348, 'Canada', 1880],
            [7.5, 12, 365544192, 'China', 1880]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ],
          [
            [4, 11.5, 3088808, 'Australia', 1890],
            [6.5, 12, 4908078, 'Canada', 1890],
            [7, 12, 377135349, 'China', 1890]
          ]
        ]
      },
      imgSrc: require('@/assets/office/office2.jpg'),
      context: {}, // canvas对象
      axis: {
        startX: null,
        endX: null,
        startY: null,
        endY: null,
        symbolSize: 28
      },
      positionTracks: [],
      tagPosition_old: [],
      distance_queue: [],
      options: {
        baseOption: {
          timeline: {
            axisType: 'time',
            orient: 'vertical',
            autoPlay: true,
            inverse: true,
            playInterval: 800,
            left: null,
            right: 80,
            top: 20,
            bottom: 20,
            width: 75,
            height: null,
            label: {
              normal: {
                textStyle: {
                  color: '#000'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#0033FF'
                }
              }
            },
            symbol: 'none',
            lineStyle: {
              color: '#555'
            },
            checkpointStyle: {
              color: '#bbb',
              borderColor: '#777',
              borderWidth: 2
            },
            controlStyle: {
              showNextBtn: false,
              showPrevBtn: false,
              normal: {
                color: '#666',
                borderColor: '#666'
              },
              emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
              }
            },
            data: []
          },
          title: {
            // text: this.data.timeline[0],
            // textAlign: 'left',
            left: '8%',
            top: '73%',
            textStyle: {
              fontSize: 70,
              color: 'rgba(0, 0, 0, 0.9)'
            }
          },
          backgroundColor: {
            image: null,
            repeat: 'no-repeat'
          },
          xAxis: {
            min: 0,
            max: mapData.mapWidth,
            show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          },
          yAxis: {
            min: 0,
            max: mapData.mapHeight,
            show: false //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          },
          grid: {
            x: '10%',
            y: '10%',
            x2: '10%',
            y2: '10%'
          },
          symbol:
            'path://M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z',
          symbolSize: 28,
          itemStyle: {
            color: '#ff00ff'
            // normal: {
            //   opacity: 0.8
            // }
          },
          series: [
            {
              type: 'scatter',
              id: 'gridScatter'
            }
          ],
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'quinticInOut'
        },
        options: []
      }
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    this.chart.showLoading()
    this.chart.setOption(this.options, true)
    // document.getElementById('img').crossOrigin = 'anonymous'
    // this.img.src = this.imgSrc
    // this.img.width = '100%'
    // this.img.height = '100%'
    this.canvas = document.createElement('canvas')
    this.context = this.canvas.getContext('2d')
    console.log(this.chart.getWidth())
    this.canvas.width = this.chart.getWidth()
    this.canvas.height = this.chart.getHeight()
    this.img2 = document.getElementById('img')
    this.img2.width = this.chart.getWidth()
    this.img2.height = this.chart.getHeight()
    this.ratio = devicePixelRatio
    this.options.baseOption.backgroundColor.image = this.canvas
    this.img2.onload = () => {
      this.context.drawImage(
        this.img2,
        0,
        0,
        this.chart.getWidth(),
        this.chart.getHeight()
      )
      console.log(this.img2)
    }
    setTimeout(() => {
      let dataURL = this.canvas.toDataURL('image/png')
      // document.getElementById('img').src = dataURL
      this.img3.src = dataURL
      this.img3.onload = () => {
        if (devicePixelRatio >= 1) {
          this.canvas.width = this.chart.getWidth() * devicePixelRatio
          this.canvas.height = this.chart.getHeight() * devicePixelRatio
        } else {
          this.canvas.width = this.chart.getWidth() / devicePixelRatio
          this.canvas.height = this.chart.getHeight() / devicePixelRatio
        }
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.context.drawImage(
          this.img3,
          this.chart.getWidth() * 0.1 * devicePixelRatio,
          this.chart.getHeight() * 0.1 * devicePixelRatio,
          this.canvas.width * 0.8,
          this.canvas.height * 0.8
        )
        this.chart.setOption(this.options)
        this.$nextTick(() => {
          this.chart.resize()
          this.chart.hideLoading()
          console.log(this.canvas.width)
        })
      }
    }, 2000)

    // this.$bus.on('showCharts', val => {
    //   console.log(val)
    //   this.chart.hideLoading()
    // })

    this.$_resizeHandler = this.handleResize()
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()

    this.chart.on('datazoom', this.handledataZoomChanged)
    this.chart.on('brushSelected', this.handleBrushSelected)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.addData()
    // this.chart.setOption(this.options, true)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.showLoading()
      this.chart.setOption(this.options, true)
    },
    handleResize() {
      let result = debounce(() => {
        if (this.show2D) {
          console.log(this.chart.getWidth())
          this.chart.resize()
          console.log(devicePixelRatio)
          this.$nextTick(() => {
            if (devicePixelRatio >= 1) {
              this.canvas.width = this.chart.getWidth() * devicePixelRatio
              this.canvas.height = this.chart.getHeight() * devicePixelRatio
            } else {
              this.canvas.width = this.chart.getWidth() / devicePixelRatio
              this.canvas.height = this.chart.getHeight() / devicePixelRatio
            }
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
            this.context.drawImage(
              this.img3,
              this.chart.getWidth() * 0.1 * devicePixelRatio,
              this.chart.getHeight() * 0.1 * devicePixelRatio,
              this.canvas.width * 0.8,
              this.canvas.height * 0.8
            )
            // this.chart.resize()
          })

          console.log(this.chart.getWidth())
          console.log(this.canvas.width)
        }
      }, 100)
      return result
    },
    createSeries(userName, x, y, color, tagId, userPost, status, buttonstatus) {
      let obj = {
        type: 'scatter',
        name: null,
        symbol:
          'path://M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z',
        symbolSize: 28,
        itemStyle: {
          color: color
          // normal: {
          //   opacity: 0.8
          // }
        },
        emphasis: {
          itemStyle: {
            borderWidth: 90,
            shadowColor: '#333',
            shadowBlur: 3
          }
        },
        dimensions: ['x', 'y', 'userName', 'tagId', 'userPost'],
        rippleEffect: { scale: 1.5 },
        markArea: { data: [] },
        data: []
      }
      if (userPost === '手推车') {
        obj.symbol =
          'path://M986.304 483.946667c-7.018667-13.248-20.416-20.522667-37.738667-20.522667h-0.042666l-642.88 0.554667a54.570667 54.570667 0 0 0-29.845334 8.938666L185.557333 168.341333a16 16 0 0 0-15.338666-11.477333H48.661333a16 16 0 0 0 0 32h109.610667l93.909333 317.013333a88.170667 88.170667 0 0 0 0.170667 49.450667l72.341333 253.034667c3.562667 12.501333 13.354667 23.04 25.92 29.674666l34.858667 117.696a16.042667 16.042667 0 0 0 27.093333 6.336l108.138667-116.949333 6.101333-0.021333a118.208 118.208 0 0 0-0.96 14.378666c0 65.6 53.354667 118.954667 118.954667 118.954667s118.954667-53.354667 118.954667-118.954667c0-6.122667-0.618667-12.117333-1.514667-18.005333 14.656-4.48 27.797333-14.421333 37.930667-29.397333l171.52-252.906667c19.413333-28.693333 24.746667-56.106667 14.613333-75.221333zM408.149333 919.68L386.133333 845.376l90.88-0.192-68.864 74.496z m236.629334 26.730667c-47.957333 0-86.954667-39.018667-86.954667-86.954667s38.997333-86.954667 86.954667-86.954667 86.954667 38.997333 86.954666 86.954667-38.997333 86.954667-86.954666 86.954667z m300.416-405.226667l-171.52 252.906667c-3.626667 5.354667-10.645333 13.333333-20.522667 16.576a119.04 119.04 0 0 0-108.373333-70.165334 119.146667 119.146667 0 0 0-109.525334 72.554667l-155.605333 0.32h-0.064c-11.562667 0-22.272-7.274667-24.128-13.802667l-72.341333-253.034666c-4.693333-16.405333-3.114667-32 4.181333-41.685334 4.437333-5.888 10.624-8.874667 18.368-8.896l642.88-0.554666h0.042667c7.573333 0 8.981333 2.666667 9.450666 3.541333 2.773333 5.269333 1.664 20.842667-12.842666 42.24z'
      }
      if (status === 1 || buttonstatus === 1) {
        obj.itemStyle.color = '#ff0000'
      } else {
        obj.itemStyle.color = color
      }
      obj.data = [[x, y, userName, tagId, userPost]]
      console.log(obj.data)
      obj.name = userName
      return obj
    },
    addData() {
      for (let n = 0; n < this.data.timeline.length; n++) {
        this.options.baseOption.timeline.data.push(this.data.timeline[n])
        // if (n === 2) {
        //   this.handCart =
        //     'path://M986.304 483.946667c-7.018667-13.248-20.416-20.522667-37.738667-20.522667h-0.042666l-642.88 0.554667a54.570667 54.570667 0 0 0-29.845334 8.938666L185.557333 168.341333a16 16 0 0 0-15.338666-11.477333H48.661333a16 16 0 0 0 0 32h109.610667l93.909333 317.013333a88.170667 88.170667 0 0 0 0.170667 49.450667l72.341333 253.034667c3.562667 12.501333 13.354667 23.04 25.92 29.674666l34.858667 117.696a16.042667 16.042667 0 0 0 27.093333 6.336l108.138667-116.949333 6.101333-0.021333a118.208 118.208 0 0 0-0.96 14.378666c0 65.6 53.354667 118.954667 118.954667 118.954667s118.954667-53.354667 118.954667-118.954667c0-6.122667-0.618667-12.117333-1.514667-18.005333 14.656-4.48 27.797333-14.421333 37.930667-29.397333l171.52-252.906667c19.413333-28.693333 24.746667-56.106667 14.613333-75.221333zM408.149333 919.68L386.133333 845.376l90.88-0.192-68.864 74.496z m236.629334 26.730667c-47.957333 0-86.954667-39.018667-86.954667-86.954667s38.997333-86.954667 86.954667-86.954667 86.954667 38.997333 86.954666 86.954667-38.997333 86.954667-86.954666 86.954667z m300.416-405.226667l-171.52 252.906667c-3.626667 5.354667-10.645333 13.333333-20.522667 16.576a119.04 119.04 0 0 0-108.373333-70.165334 119.146667 119.146667 0 0 0-109.525334 72.554667l-155.605333 0.32h-0.064c-11.562667 0-22.272-7.274667-24.128-13.802667l-72.341333-253.034666c-4.693333-16.405333-3.114667-32 4.181333-41.685334 4.437333-5.888 10.624-8.874667 18.368-8.896l642.88-0.554666h0.042667c7.573333 0 8.981333 2.666667 9.450666 3.541333 2.773333 5.269333 1.664 20.842667-12.842666 42.24z'
        // }
        this.options.options.push({
          title: {
            show: true,
            text: parseTime(this.data.timeline[n])
          },
          series: {
            id: 'gridScatter',
            name: this.data.timeline[n],
            type: 'effectScatter',
            data: this.data.series[n],
            symbolSize: 18
            // symbol: this.handCart
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';
// .map-container {
//   position: relative;
//   width: calc(100% - 54px);
//   height: calc(100vh + 25px);
// }
#office {
  // position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
// #chart {
//   background: url('~@/assets/office/office2.jpg') center no-repeat;
//   background-size: 80% 100%;
// }
</style>
